<template>
  <span class="cjui-loading--line-rotate-three"></span>
</template>

<style lang="scss">
// 三圆环线旋转
.cjui-loading--line-rotate-three {
  --cjui-loading-width: 50px;
  --cjui-loading-height: 50px;
  --cjui-loading-color: var(--cjui-color-primary);

  width: var(--cjui-loading-width);
  height: var(--cjui-loading-height);
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--cjui-loading-color);
  animation: cjui-loading--line-rotate-three 2s linear infinite;

  &:before {
    content: "";
    position: absolute;
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--cjui-loading-color);
    animation: cjui-loading--line-rotate-three 3s linear infinite;
  }
  &:after {
      content: "";
      position: absolute;
      top: 15%;
      left: 15%;
      right: 15%;
      bottom: 15%;
      border-radius: 50%;
      border: 2px solid transparent;
      border-top-color: var(--cjui-loading-color);
      animation: cjui-loading--line-rotate-three 1.5s linear infinite;
  }
}

@keyframes cjui-loading--line-rotate-three {
  from { transform: rotate(0); }
  to{ transform: rotate(359deg); }
}
</style>
